<template>
  <div class="wall-message">
    <p class="title">{{ wallType[id].name }}</p>
    <p class="slogan">{{ wallType[id].slogant }}</p>
    <div class="label">
      <p
        class="label-list"
        :class="{ lbselected: nlabel == -1 }"
        @click="selectNode(-1)"
      >
        全部
      </p>
      <p
        class="label-list"
        :class="{ lbselected: nlabel == index }"
        v-for="(e, index) in label[id]"
        :key="index"
        @click="selectNode(index)"
      >
        {{ e }}
      </p>
    </div>
    <div class="card" v-show="id == 0">
      <node-card
        v-for="(e, index) in cards"
        :key="index"
        :note="e"
        class="card-inner"
        :class="{ cardselected: index == cardSelected }"
        @toDetail="selectedCard(index)"
      ></node-card>
    </div>
    <div class="photo" v-show="id == 1">
      <photo-card
        :photo="e"
        class="photo-card"
        v-for="(e, index) in cards"
        :key="index"
        @toDetail="selectedCard(index)"
      ></photo-card>
    </div>
    <!-- 为空时显示 -->
    <div class="none-msg" v-if="isOk == 0">
      <img :src="none[id].url" alt="" />
      <p>{{ none[id].msg }}</p>
    </div>
    <p class="bottom-tip" v-show="page == 0">没有更多了...</p>
    <div
      class="add"
      :style="{ bottom: addBottom + 'px' }"
      @click="addCard"
      v-show="!modal"
    >
      <img src="@/assets/images/添加.png" alt="" />
    </div>
    <lg-modal-vue :title="title" @close="closeModal" :isModal="modal">
      <new-card
        :id="id"
        @addClose="closeModal"
        v-if="cardSelected == -1"
        @clickbt="newCard"
      ></new-card>
      <card-detail-vue
        v-if="cardSelected !== -1"
        :card="cards[cardSelected]"
      ></card-detail-vue>
    </lg-modal-vue>
    <lg-viewer-vue
      :isView="view"
      :photos="photoArr"
      :nowNumber="cardSelected"
      @viewSwitch="viewSwitch"
    ></lg-viewer-vue>
  </div>
</template>

<script>
import { wallType, label, none } from "@/utils/data";
import NodeCard from "@/components/NoteCard.vue";
import LgModalVue from "@/components/LgModal.vue";
import NewCard from "../components/NewCard.vue";
import CardDetailVue from "@/components/CardDetail.vue";
import PhotoCard from "@/components/PhotoCard.vue";
import LgViewerVue from "@/components/LgViewer.vue";
import { findWallPageApi } from "@/api/index";

export default {
  data() {
    return {
      wallType,
      label,
      none,
      nlabel: -1, //当前对应的标签
      cards: [],
      nWidth: 0, //卡片宽度
      addBottom: 30,
      //新建标题
      title: "",
      modal: false, //是否调用弹窗
      cardSelected: -1,
      view: false, //预览大图
      photoArr: [],
      isOk: -1, //是否加载中   -1为加载中，0表示没有拿到数据
      page: 1,
      pagesize: 100,
    };
  },
  components: {
    NodeCard,
    LgModalVue,
    NewCard,
    CardDetailVue,
    PhotoCard,
    LgViewerVue,
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    id() {
      this.modal = false;
      this.view = false;
      this.nlabel = -1;
      this.cardSelected = -1;
      this.selectNode();
    },
  },
  methods: {
    //切换label
    selectNode(e) {
      this.nlabel = e;
      //清空当前数据
      this.cards = [];
      this.page = 1;
      this.getWallCard(this.id);
    },
    //监听页面滚动
    scrollBottom() {
      //距离顶部高度
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //屏幕的高度
      let clientHeight = document.documentElement.clientHeight;
      //内容高度
      let scrollHeight = document.documentElement.scrollHeight;
      if (scrollTop + clientHeight + 230 >= scrollHeight) {
        this.addBottom = scrollTop + clientHeight + 230 - scrollHeight;
      } else {
        this.addBottom = 30;
      }
      //加载更多
      if (scrollTop + clientHeight == scrollHeight) {
        this.getWallCard(this.id);
      }
    },
    //新建Card
    addCard() {
      if (this.id == 0) {
        this.title = "写留言";
      } else {
        this.title = "添照片";
      }

      this.modal = true;
    },

    //切换弹窗的开启和关闭
    closeModal() {
      this.modal = false;
      this.cardSelected = -1;
      if (this.id == 1) {
        this.view = false;
      }
    },
    //选择卡片
    selectedCard(e) {
      this.title = "";
      if (e != this.cardSelected) {
        this.cardSelected = e;
        this.modal = true;
        if (this.id == 1) {
          this.view = true;
        }
      } else {
        this.cardSelected = -1;
        this.modal = false;
        if (this.id == 1) {
          this.view = false;
        }
      }
    },
    //切换图片
    viewSwitch(e) {
      if (e == 0) {
        this.cardSelected--;
      } else {
        this.cardSelected++;
      }
    },
    //前端插入卡片
    newCard(e) {
      this.cards.unshift(e);
      this.closeModal();
    },

    getWallCard(id) {
      this.isOk = -1;
      if (this.page > 0) {
        let data = {
          type: id,
          page: this.page,
          pagesize: this.pagesize,
          userId: this.user.id,
          label: this.nlabel,
        };
        findWallPageApi(data).then((res) => {
          this.cards = this.cards.concat(res.message);
          if (res.message.length) {
            this.page++;
          } else {
            this.page = 0;
          }
          if (this.cards.length > 0) {
            this.isOk = 1;
            if (this.page == 0) {
              this.isOk = 2;
            }
          } else {
            this.isOk = 0;
          }
          //如果为图片将图片单独拿出来
          if (this.id == 1) {
            for (let i = 0; i < this.cards.length; i++) {
              this.photoArr.push(this.cards[i].imgurl);
            }
          }
        });
      }
    },
    getUser() {
      let timer = setInterval(() => {
        if (this.user) {
          clearInterval(timer);
          this.getWallCard(this.id);
        }
      }, 10);
    },
  },
  mounted() {
    this.getUser();

    //监听滚动高度变化
    window.addEventListener("scroll", this.scrollBottom);
  },
  // unmounted(){
  //   window.addEventListener('scroll',this.scrollBottom)
  // }
};
</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.wall-message {
  min-height: 700px;
  padding-top: 52px;
  .title {
    padding-top: 48px;
    padding-bottom: @padding-8;
    font-size: 56px;
    color: @gray-1;
    text-align: center;
    font-weight: 600;
  }
  .slogan {
    color: @gray-2;
    text-align: center;
  }
  .label {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .label-list {
      padding: 0 14px;
      display: flex;
      justify-content: center;
      height: 30px;
      margin: @padding-4;
      color: @gray-2;
      box-sizing: border-box;
      cursor: pointer;
    }
    .lbselected {
      color: @gray-1;
      font-weight: 600;
      border: 1px solid @gray-1;
      border-radius: 16px;
    }
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 28px;
    justify-content: center;
    .card-inner {
      margin: 6px;
    }
    .cardselected {
      border: 1px solid @primary-color;
    }
  }
  .photo {
    width: 88%;
    margin: 0 auto;
    columns: 6;
    column-gap: @padding-4;
    margin-top: 36px;
  }
  .photo-card {
    margin-bottom: @padding-4;
  }
  .add {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    position: fixed;
    background: @gray-1;
    box-shadow: 0px 4px 8px 0px rbga(0, 0, 0, 0.08);
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: @tr;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .none-msg {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    position: absolute;
    top: 280px;
    img {
      display: inline;
    }
    p {
      font-weight: 700;
      font-size: 24px;
      color: @gray-3;
    }
  }
  .bottom-tip {
    text-align: center;
    color: @gray-3;
    padding: 20px;
  }
}
</style>
